<template>
  <p>Vuex</p>
  <p>count1:{{ $store.state.count }}</p>
  <p>count2:{{ this.$store.state.count }}</p>
  <p>count3:{{ count }}</p>
  <p>test:{{ test }}</p>
  <p>countAlias:{{ countAlias }}</p>

  <p>getters ========>>>></p>
  <p>countAddFive:{{ $store.getters.countAddFive }}</p>
  <p>countAddFive:{{ countAddFive }}</p>
  <p>countAddFiveAddTen:{{ countAddFiveAddTen }}</p>
  <p>countAddFiveAlias:{{ countAddFiveAlias }}</p>

  <p>Mutations ====================</p>
  <button @click="addMut">addMut</button>
  <button @click="addPlayloadMut">addPlayloadMut</button>
  <button @click="add">add</button>
  <button @click="addCommit">addCommit</button>

  <p>Actions =============</p>
  <button @click="addActionMut">addActionMut</button>
  <button @click="asyncAddActionMut">asyncAddActionMut</button>
  <button @click="asyncAddPlayloadActionMut">asyncAddPlayloadActionMut</button>
  <button @click="addAction">addAction</button>
  <button @click="addActionDispatch">addActionDispatch</button>

  <h1>命名空间</h1>
  <p>无命名空间</p>
  <p>访问 模块A中的state数据: {{ $store.state.a.countA }}</p>
  <p>访问 模块A中的getters数据: {{ $store.getters.countAA }}</p>

  <p>有命名空间的</p>
  <p>访问 模块B中的state数据: {{ $store.state.b.countB }}</p>
  <p>访问 模块B中的getters数据: {{ $store.getters['b/countBB'] }}</p>

  <p>Vuex module</p>
  <button @click="commitIncreaseA">触发-moduleA-muations</button>
  <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>

  <button @click="commitIncreaseB">触发-moduleB-muations</button>
  <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>

  <h1>MapXXX方法</h1>
  <h2>全局</h2>
  <p>state</p>
  <p>countA:{{ countA }}</p>
  
  <p>getters</p>
  <p>countAA:{{ countAA }}</p>
  
  <p>mutations</p>
  <button @click="increaseA">触发increaseA</button>

  <h2>模块</h2>
  <p>state</p>
  <p>countB:{{ countB }}</p>
  <p>getters</p>
  <p>countAA:{{ countBB }}</p>
  <p>mutations</p>
  <button @click="increaseB">触发increaseB</button>

</template>

<script>
import { mapState, mapGetters, mapMutations,mapActions } from "vuex";
export default {
  computed: {
    // count(){
    //     return this.$store.state.count
    // }
    // // 数组形式
    // ...mapState(['count', 'test'])
    // 对象形式
    ...mapState({
      // count: state => state.count,
      // test: state => state.test,
      count: "count",
      test: "test",
      countAlias: "count",
    }),
    // countAddFive(){
    //     return this.$store.getters.countAddFive
    // },
    // countAddFiveAddTen(){
    //     return this.$store.getters.countAddFiveAddTen
    // }
    // // 数组模式
    // ...mapGetters(['countAddFive', 'countAddFiveAddTen'])
    ...mapGetters({
      countAddFive: "countAddFive",
      countAddFiveAddTen: "countAddFiveAddTen",
      countAddFiveAlias: "countAddFive",
    }),

    // state moduleA 
    ...mapState({
      countA: state => state.a.countA
    }),

    // state 模块b
    ...mapState('b',['countB']),

    // getters 全局
    ...mapGetters(['countAA']),

    // getters 模块b
    ...mapGetters('b',['countBB'])
  },
  methods: {
    addMut() {
      this.$store.commit("add");
    },
    addPlayloadMut() {
      // // 直接写法
      // this.$store.commit('addPlayload', {num:10})
      // 对象写法
      this.$store.commit({
        type: "addPlayload",
        num: 10,
      });
    },
    ...mapMutations(["add", "addPlayload"]),
    addCommit() {
      this.addPlayload({ num: 20 });
    },
    // add(state){
    //     state.count++
    // },
    // addPlayload(state, playload){
    //     state.count += playload.num // a +=b ----->>> a= a +b
    // }
    addActionMut(){
      this.$store.dispatch('addAction')
    },
    asyncAddActionMut(){
      this.$store.dispatch('asyncAddAction')
    },
    asyncAddPlayloadActionMut(){
      this.$store.dispatch('asyncAddPloyloadAction',{num:20})
    },
    ...mapActions(['addAction','asyncAddPloyloadAction']),
    addActionDispatch(){
      this.asyncAddPloyloadAction({num:30})
    },
    commitIncreaseA(){
      this.$store.commit('increaseA')
    },
    commitAsyncIncreaseA(){
      this.$store.dispatch('asyncIncreaseA')
    },
    commitIncreaseB(){
      this.$store.commit('b/increaseB')
    },
    commitAsyncIncreaseB(){
      this.$store.dispatch('b/asyncIncreaseB')
    },

    // 模块A
    ...mapMutations(['increaseA']),
    // 模块B
    ...mapMutations('b',['increaseB'])

  },
  mounted() {
    console.log(this.$store);
  },
};
</script>
